﻿@model Carpool1.Models.CarpoolInfo
@{
    ViewBag.Title = "用户登录";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<div class="container mt-5">
    <div class="row justify-content-center">
        <div class="col-md-6">
            <div class="card shadow">
                <div class="card-header bg-primary text-white text-center">
                    <h3>用户登录</h3>
                </div>

                @if (ViewBag.SuccessMessage != null)
                {
                    <div class="alert alert-success m-3">@ViewBag.SuccessMessage</div>
                }

                @if (!ViewData.ModelState.IsValid)
                {
                    <div class="alert alert-danger m-3">
                        @Html.ValidationSummary(true, "", new { @class = "mb-0" })
                    </div>
                }

                <div class="card-body">
                    @using (Html.BeginForm("Login", "Account", FormMethod.Post, new { @class = "needs-validation", novalidate = "" }))
                    {
                        @Html.AntiForgeryToken()

                        <div class="mb-3">
                            <label class="form-label">手机号</label>
                            <div class="input-group">
                                <span class="input-group-text">+86</span>
                                <input type="tel" name="phone" class="form-control"
                                       value="@ViewBag.RememberPhone" required
                                       pattern="^1[3-9]\d{9}$" placeholder="11位手机号" />
                                <div class="invalid-feedback">请输入有效手机号</div>
                            </div>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">密码</label>
                            <input type="password" name="password" class="form-control"
                                   required minlength="6" placeholder="6-20位密码" />
                            <div class="invalid-feedback">密码不能少于6位</div>
                        </div>

                        <div class="form-check mb-3">
                            <input type="checkbox" name="rememberMe" class="form-check-input" id="rememberMe" />
                            <label class="form-check-label" for="rememberMe">记住手机号</label>
                        </div>

                        <button type="submit" class="w-100 btn btn-primary">登录</button>
                        <div class="text-center mt-3">
                            <a href="@Url.Action("Register")" class="text-primary">没有账号？注册</a>
                        </div>
                    }
                </div>
            </div>
        </div>
    </div>
</div>

@section Scripts {
    <script>
        // 表单验证
        document.querySelector('.needs-validation').addEventListener('submit', function (e) {
            if (!this.checkValidity()) {
                e.preventDefault();
                e.stopPropagation();
            }
            this.classList.add('was-validated');
        });
    </script>
}
